<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3饼状loading效果</title>
    <style type="text/css">
        .wrap { width: 100%; height: 100%; position: relative; }
        .inner, .inner2 { 
          position: absolute;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%); 
          width: 38px; height: 38px; 
          border-radius: 40px; 
          overflow: hidden; 
        }
        .r{
          position:absolute;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%); 
        }
        .inner { opacity: 1; background-color: #89abdd; animation: second-half-hide 1.6s steps(1, end) infinite; }
        .inner2 { opacity: 0; background-color: #4b86db; animation: second-half-show 1.6s steps(1, end) infinite; }
        .spiner, .filler, .masker { position: absolute; width: 50%; height: 100%; }
        .spiner { border-radius: 40px 0 0 40px; background-color: #4b86db; transform-origin: right center; animation: spin 800ms infinite linear; left: 0; top: 0; }
        .filler { border-radius: 0 40px 40px 0; background-color: #4b86db; animation: second-half-hide 800ms steps(1, end) infinite; left: 50%; top: 0; opacity: 1; }
        .masker { border-radius: 40px 0 0 40px; background-color: #89abdd; animation: second-half-show 800ms steps(1, end) infinite; left: 0; top: 0; opacity: 0; }

        .inner2 .spiner, .inner2 .filler { background-color: #89abdd; }
        .inner2 .masker { background-color: #4b86db; }

        .ring{
          width: 64px;
          height: 64px;
          border:2px solid;
          border-color:transparent #89abdd #89abdd ;
          border-radius: 50%;
          animation:ring 800ms infinite linear;
         }

       @keyframes ring {
          0%   { transform: rotate(315deg); }
          100% { transform: rotate(-45deg); }
        }
        @keyframes spin {
          0%   { transform: rotate(360deg); }
          100% { transform: rotate(0deg); }
        }
        @keyframes second-half-hide {
          0%        { opacity: 1; }
          50%, 100% { opacity: 0; }
        }
        @keyframes second-half-show {
          0%        { opacity: 0; }
          50%, 100% { opacity: 1; }
        }
</style>
</head>

<body>
<div class="wrap">
    <div class="outer"></div>
    <div class="inner">
        <div class="spiner"></div>
        <div class="filler"></div>
        <div class="masker"></div>
    </div>
    <div class="inner2">
        <div class="spiner"></div>
        <div class="filler"></div>
        <div class="masker"></div>
    </div>
    <div class="r">
    <div class="ring"></div>
    </div>
</div>
</body> 
</html>